<template>
  <div style="width: 1100px; margin: auto">
    <el-card class="vsearch">
      请选择视频类型：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          mode="horizontal"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-button icon="el-icon-search" type="primary" circle style="margin-left: 30px" @click="goToSearch"></el-button>
    </el-card>

    <el-card class="vshow">
      <div style="height: 540px;">
        <el-card v-for="item in videos " :key="item.id" class="vcard">
          <div>
            <el-image
              style="width: 250px; height: 150px;"
              :src="require('/Users/lixiang/Downloads/sucai/'+item.poster)"
              fit="contain"></el-image>
          </div>

          <el-button icon="el-icon-video-play"  mini type="success" round @click="goToPlay(item)">播 放</el-button>
        </el-card>


      </div>
      <hr>
      <el-pagination
        style="margin-top: 13px"
        @current-change="handleCurrentChange"
        background
        :page-size=6
        layout="prev, pager, next"
        :total="max">
      </el-pagination>


    </el-card>

  </div>
</template>

<script>
  let url = 'http://localhost:8888/';
    export default {
        name: "fVideo",
      data() {
        return {
          options: [{
            value: 'java',
            label: 'Java'
          }, {
            value: 'c',
            label: 'C'
          }, {
            value: '公考',
            label: '公考'
          }, {
            value: '考研',
            label: '考研'
          }, {
            value: '面试',
            label: '面试'
          }],
          value: '',
          max:0,
          videos:[],

        }
      },
      methods:{
        handleCurrentChange(val){
          this.getVideos(val,this.value)

        },
        goToPlay(item){
          this.$router.push({name: "fPlay",params:{a:item}});
        },
        goToSearch(){
          this.getVideos(1,this.value)
          this.getVideoCount(this.value)
        },
        getVideos(cp,type){
          this.$http
            .get(url + "video/findVideoByPage", {params: {currentPage: cp,vType:type}})
            .then(result => {
              this.$message({
                type: 'success',
                message: '获取视频信息成功！'
              });
              this.videos = result.body
            }, function () {
              this.$message({
                type: 'error',
                message: '获取视频失败！'
              });
            });
        },
        getVideoCount(type){
          this.$http
            .get(url + "video/getVideoCount", {params: {vType:type}})
            .then(result => {
              this.max = result.body.cnt;
            }, function () {
              this.$message({
                type: 'error',
                message: '获取视频失败！'
              });
            });
        },

      },
      mounted() {
          //加载全部类型视频
        this.getVideos(1,'')
        this.getVideoCount('')
      }

    }
</script>

<style scoped>
  .vcard{
    float: left;
    margin: 10px 15px;
  }
  .vsearch{
    margin: 10px auto;
  }
  .vshow{
    margin: 10px auto;
    padding-left: 40px;
  }
  li{
    display: block;
  }
</style>
